<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <h2>Example Table</h2>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>John</td>
                        <td>Doe</td>
                        <td><span><a href="mailto:john.doe@example.com">john.doe@example.com</a><span>
                                    <span><button class="btn btn-info" type="button"
                                            onclick="alert('Row 1: Email address copied!')">
                                            <span class="glyphicon glyphicon-search"></span>Copy email</button></span>
                        </td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jane</td>
                        <td>Doe</td>
                        <td><span><a href="mailto:jane.doe@example.com">jane.doe@example.com</a></span>
                            <span><button class="btn btn-info" type="button"
                                    onclick="alert('Row 2: Email address copied!')">
                                    <span class="glyphicon glyphicon-search"></span>Copy email</button></span>
                        </td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Jim</td>
                        <td>Doe</td>
                        <td><span><a href="mailto:jim.doe@example.com">jim.doe@example.com</a></span>
                            <span><button class="btn btn-info" type="button"
                                    onclick="alert('Row 3: Email address copied!')">
                                    <span class="glyphicon glyphicon-search"></span>Copy email</button></span>
                        </td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Tina</td>
                        <td>Doe</td>
                        <td><span><a href="mailto:tina.doe@example.com">tina.doe@example.com</a></span>
                            <span><button class="btn btn-info" type="button"
                                    onclick="alert('Row 4: Email address copied!')">
                                    <span class="glyphicon glyphicon-search"></span>Copy email</button></span>
                        </td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="container">
        <div class="table-responsive">
            <table class="table">
                <caption>Table with Duplicate Columns</h2>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Primary Email</th>
                        <th>Email</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>John</td>
                        <td>Doe</td>
                        <td><span><a onclick="alert('Row 1: Primary Email address copied!')">john.doe@example.com</a></span></td>
                        <td><span><a onclick="alert('Row 1: Secondary Email address copied!')">john.doe2@example.com</a></span></td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jane</td>
                        <td>Doe</td>
                        <td><span><a  onclick="alert('Row 2: Primary Email address copied!')">jane.doe@example.com</a></span></td>
                        <td><span><a onclick="alert('Row 2: Secondary Email address copied!')">jane.doe2@example.com</a></span></td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Jim</td>
                        <td>Doe</td>
                        <td><span><a onclick="alert('Row 3: Primary Email address copied!')">jim.doe@example.com</a></span></td>
                        <td><span><a onclick="alert('Row 3: Secondary Email address copied!')">jim.doe2@example.com</a></span></td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Tina</td>
                        <td>Doe</td>
                        <td><span><a onclick="alert('Row 4: Primary Email address copied!')">tina.doe@example.com</a></span></td>
                        <td><span><a onclick="alert('Row 4: Secondary Email address copied!')">tina.doe2@example.com</a></span></td>
                        <td>New York</td>
                        <td>USA</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>

</html>